<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    This program and the accompanying materials are made
    available under the terms of the Eclipse Public License 2.0
    which is available at https://www.eclipse.org/legal/epl-2.0/

    SPDX-License-Identifier: EPL-2.0

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<che-list-item flex ng-mouseover="hover=true" ng-mouseout="hover=false">
  <div flex="100"
       layout="row"
       layout-align="start stretch"
       class="project-item-row">
    <div layout="row"
         layout-align="start center"
         class="che-checkbox-area">
      <che-list-item-checked ng-model="projectItemCtrl.isSelect"
                             che-icon="chefont cheico-type-{{projectItemCtrl.project.type}} cheico-type-blank"
                             che-aria-label-checkbox="Project {{projectItemCtrl.project.name}}"
                             ng-click="projectItemCtrl.onCheckboxClick()"></che-list-item-checked>
    </div>
    <div flex
         layout-xs="column" layout-gt-xs="row"
         layout-align-gt-xs="start center"
         layout-align-xs="start start"
         class="che-list-item-details">
      <div flex-gt-xs="30"
           aria-label="project-item" 
           class="che-list-item-name">
        <span class="che-xs-header noselect" hide-gt-xs>Name</span>
        <span class="che-hover project-item-name">{{projectItemCtrl.project.name}}</span>
      </div>
      <div flex-gt-xs="50"
           aria-label="project-item"
           class="che-list-item-name">
        <span class="che-xs-header noselect" hide-gt-xs>Description</span>
        <span class="che-hover project-item-description">{{projectItemCtrl.project.description}}</span>
      </div>
      <div flex-gt-xs="20" layout="column" layout-align="center end">
        <span class="che-xs-header noselect" hide-gt-xs>Actions</span>
        <span class="che-list-actions">
          <a ng-if="projectItemCtrl.hasAction"
             uib-tooltip="Open in IDE"
             tooltip-append-to-body="true"
             ng-href="#/ide/{{projectItemCtrl.workspace.namespace}}/{{projectItemCtrl.workspace.config.name}}">
            <span class="fa fa-chevron-circle-right"></span>
          </a>
        </span>
      </div>
    </div>
  </div>
</che-list-item>
